import { ModalDemos } from "@/lib/@docs/demos/src";
import { Layout } from "@/layout";
import { MDX_DATA } from "@/mdx";

export default Layout(MDX_DATA.Modal);

## Usage

<Demo data={ModalDemos.usage} />

## Center modal vertically

<Demo data={ModalDemos.centered} />

## Remove header

To remove header set `withCloseButton={false}`:

<Demo data={ModalDemos.header} />

## Change size

You can change modal width by setting `size` prop to predefined size or any valid width, for example, `55%` or `50rem`.
`Modal` width cannot exceed `100vw`.

<Demo data={ModalDemos.sizes} />

## Size auto

`Modal` with `size="auto"` will have width to fit its content:

<Demo data={ModalDemos.sizeAuto} />

## Fullscreen

Fullscreen modal will take the entire screen, it is usually better to change transition to `fade`
when `fullScreen` prop is set:

<Demo data={ModalDemos.fullScreen} />

To switch Modal to fullscreen on devices with small screens only use [use-media-query](/hooks/use-media-query/) hook.
`size` prop is ignored if `fullScreen` prop is set:

<Demo data={ModalDemos.fullScreenMobile} />

## Customize overlay

`Modal` uses [Overlay](/core/overlay/) component, you can set any props that [Overlay](/core/overlay/)
supports with `overlayProps`:

<Demo data={ModalDemos.overlay} />

## Modal with scroll

<Demo data={ModalDemos.overflow} />

## Usage with ScrollArea

<Demo data={ModalDemos.scrollarea} />

## Change offsets

Use `xOffset`/`yOffset` to configure horizontal/vertical content offsets:

<Demo data={ModalDemos.offset} />

## Change transitions

`Modal` is built with [Transition](/core/transition/) component. Use `transitionProps`
prop to customize any [Transition](/core/transition/) properties:

<Demo data={ModalDemos.transitions} />

## Initial focus

Modal uses [FocusTrap](/core/focus-trap/) to trap focus. Add `data-autofocus`
attribute to the element that should receive initial focus.

<Demo data={ModalDemos.initialFocus} />

If you do not want to focus any elements when the modal is opened, use `FocusTrap.InitialFocus`
component to create a visually hidden element that will receive initial focus:

<Demo data={ModalDemos.initialFocusTrap} />

If you do not add `data-autofocus` attribute and do not use `FocusTrap.InitialFocus`,
modal will focus the first focusable element inside it which is usually the close button.

## Control behavior

The following props can be used to control `Modal` behavior.
In most cases, it is not recommended to turn these features off –
it will make the component less accessible.

- `trapFocus` – determines whether focus should be trapped inside modal
- `closeOnEscape` – determines whether the modal should be closed when `Escape` key is pressed
- `closeOnClickOutside` – determines whether the modal should be closed when user clicks on the overlay
- `returnFocus` – determines whether focus should be returned to the element that was focused before the modal was opened

## react-remove-scroll settings

`Modal` uses [react-remove-scroll](https://github.com/theKashey/react-remove-scroll)
package to lock scroll. You can pass props down to the `RemoveScroll` component
with `removeScrollProps`:

```tsx
import { Modal } from "@mantine/core";

function Demo() {
  return (
    <Modal
      removeScrollProps={{ allowPinchZoom: true }}
      opened
      onClose={() => {}}
    />
  );
}
```

## Change close icon

Use `closeButtonProps` to customize close button:

<Demo data={ModalDemos.closeIcon} />

## Compound components

You can use the following compound components to have full control over the `Modal` rendering:

- `Modal.Root` – context provider
- `Modal.Overlay` – render [Overlay](/core/overlay/)
- `Modal.Content` – main modal element, should include all modal content
- `Modal.Header` – sticky header, usually contains `Modal.Title` and `Modal.CloseButton`
- `Modal.Title` – `h2` element, `aria-labelledby` of `Modal.Content` is pointing to this element, usually is rendered inside `Modal.Header`
- `Modal.CloseButton` – close button, usually rendered inside `Modal.Header`
- `Modal.Body` – a place for main content, `aria-describedby` of `Modal.Content` is pointing to this element

<Demo data={ModalDemos.composition} />

## Fixed elements offset

`Modal` component uses [react-remove-scroll](https://github.com/theKashey/react-remove-scroll)
package to lock scroll. To properly size these `elements` add a `className` to them ([documentation](https://github.com/theKashey/react-remove-scroll#positionfixed-elements)):

```tsx
import { RemoveScroll } from "@mantine/core";

function Demo() {
  return (
    <>
      <div className={RemoveScroll.classNames.fullWidth}>width: 100%</div>
      <div className={RemoveScroll.classNames.zeroRight}>right: 0</div>
    </>
  );
}
```

## Accessibility

`Modal` component follows [WAI-ARIA recommendations](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog) on accessibility.

Set `title` props to make component accessible, will add `aria-labelledby` to the content element:

```tsx
import { Modal } from "@mantine/core";

function Demo() {
  return <Modal title="Modal label" opened onClose={() => {}} />;
}
```

To set close button `aria-label` use `closeButtonProps`:

```tsx
import { Modal } from "@mantine/core";

function Demo() {
  return (
    <Modal
      closeButtonProps={{ "aria-label": "Close modal" }}
      opened
      onClose={() => {}}
    />
  );
}
```
